<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮盘抽奖</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        div{
            position: relative;
            width: 1000px;
            height: 1000px;
        }
        img:nth-of-type(1){
            width: 500px;
        }
        img:nth-of-type(2){
            position: absolute;
            left: 40%;
            top: 40%;
            margin-top: -176px;
            margin-left: -176px;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <img class="pan" src="images/4.jpg" alt="">
        <img class="zhen" src="images/2.png" alt="" id="zen">
    </div>


    <script>
        var zen=document.getElementById('zen');
        var n=0;
        var zhuan;
        zen.onclick=function(){
            clearInterval(zhuan)
            n=0;
            zen.style.transform=`rotate(0deg)`;
            zhuan =setInterval(function(){
                var a=parseInt(Math.random()*360)
                m=360*1+a*6;
                n=n+1;
                if(n>=m){
                    console.log(1)
                    clearInterval(zhuan);
                }else{
                    zen.style.transform=`rotate(${n}0deg)`;
                }
            },1)
        }


    </script>

</body>
</html>